<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@include file="/common/session.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>${userName}</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 100%;
            overflow: hidden;
        }

        .title {
            width: 100%;
            height: 60px;
            background: #DAE9FE;
            font-size: 1.2rem;
            color: #fff;
            position: relative;
            z-index: 1;
        }

        .left {
            float: left;
            line-height: 60px;
            width: 15%;
            text-align: center;
        }

        .left img {
            height: 60px;
        }

        .center {
            float: left;
            line-height: 60px;
            width: 85%;
            text-align: center;
            color: #000000;
            font-weight: bold;
        }

        .right {
            float: right;
            line-height: 60px;
            width: 15%;
            text-align: center;
        }

        #leftNav {
            position: fixed;
            overflow: hidden;
            width: 30%;
            height: 500px;
            background-color: #ffffff;
            font-size: 1.4rem;
            left: -30%;
            top: 0;
            -webkit-transition: left 0.5s;
            z-index: 120;
        }

        #blackBack {
            position: fixed;
            overflow: hidden;
            width: 0%;
            height: 0%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            z-index: 0;
            -webkit-transition: opacity 0.5s;
        }
    </style>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/interface/UserService.js"></script>
    <script type="text/javascript" src="${ctx}/js/loading.js"></script>
</head>
<body>
<header style="position: fixed; width: 100%; z-index: 10">
    <nav class="content">
        <ul class="title">
            <p class="left" id="menu"><img width="45" height="45" src="${ctx}/images/menu.svg"></p>
            <p id="subResource" class="center"></p>
            <!--p class="right">
                <img width="30" height="30" src="${ctx}/images/message.png" style="vertical-align: middle;margin-top: 0px;">
                <sup style="background:#ff0000;font-size:10px;vertical-align: top;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;">00</sup>
            </p-->
        </ul>
    </nav>
</header>
<div id="leftNav">
    <ul style="text-align: center; font-size: 12px;">
        <li>
            <img id="deptLogo" width="80" height="80" src="${userHeadImgUrl}" onerror="this.onerror=null; this.src='${ctx}/images/head.png'" style="border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border: 1px solid #b097fd"
                 onclick="forward('${ctx}/user/my_password.jsp', '修改密码', null)"/><br>
            ${userName}
        </li>
        <c:forEach var="resource1" items="${securityAccount.resourceList}" varStatus="status">
            <c:if test="${resource1.resourceState == 1 && resource1.resourceType == 1}">
                <li id="menuLi${status.index}" style="line-height: 40px; vertical-align: middle; border-top: 1px solid #dddddd;" onclick="forward('${ctx}${resource1.resourceUrl}', '${resource1.resourceName}', '${resource1.resourceId}')">
                    <img id="resourceIcon${resource1.resourceId}" width="10" height="10" src="${ctx}/images/common/${resource1.resourceIcon}"/>
                    <label id="resourceName${resource1.resourceId}">${resource1.resourceName}</label>
                </li>
            </c:if>
        </c:forEach>
        <li id="logoutLi" style="line-height: 40px; vertical-align: middle; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd;" onclick="location='${ctx}/controller/Logout?logoutUrl=/wx/index.jsp'">
            <img width="10" height="10" src="${ctx}/images/common/point.png"/>
            退出系统
        </li>
    </ul>
</div>
<div id="blackBack">
</div>
<iframe id="homeFrame" name="homeFrame" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" style="margin-top: 60px" src="" onload="this.height = 2700"></iframe>
</body>
</html>
<script type="text/javascript">
    sessionStorage.setItem("Authorization", "${param.Authorization}");

    var menu = document.getElementById("menu");
    var leftNav = document.getElementById("leftNav");
    var blackBack = document.getElementById("blackBack");
    menu.onclick = function () {
        leftNav.style.left = "0px";
        blackBack.style.width = "100%";
        blackBack.style.height = "100%";
        blackBack.style.opacity = "1";
        blackBack.style.zIndex = "100";
        blackBack.onclick = function () {
            leftNav.style.left = "-30%";
            blackBack.style.width = "0";
            blackBack.style.height = "0";
            blackBack.style.opacity = "0";
            blackBack.style.zIndex = "0";
        }
        leftNav.onclick = function () {
            leftNav.style.left = "-30%";
            blackBack.style.width = "0";
            blackBack.style.height = "0";
            blackBack.style.opacity = "0";
            blackBack.style.zIndex = "0";
        }
    }

    leftNav.style.height = document.documentElement.clientHeight;
    blackBack.style.height = document.documentElement.clientHeight;

    var activeImg;
    var activeName;
    function forward(path, title, resourceIconId) {
        scrollTo(0, 0);
        document.title = title;
        var homeFrame = document.getElementById("homeFrame");
        homeFrame.src = path;
        if (resourceIconId != null) {
            var name = document.getElementById("resourceName" + resourceIconId);
            if (name) {
                if (activeName != null) {
                    ;
                    activeName.style.fontWeight = "normal";
                }
                name.style.fontWeight = "bold";
                activeName = name;
            }
            var img = document.getElementById("resourceIcon" + resourceIconId);
            if (img) {
                if (activeImg != null) {
                    var src = activeImg.src;
                    var array = src.split("/");
                    src = array[array.length - 1];
                    array = src.split("_");
                    src = array[0];
                    activeImg.src = "${ctx}/images/common/" + src + ".png";
                }
                var src = img.src;
                var array = src.split("/");
                src = array[array.length - 1];
                array = src.split(".");
                src = array[0];
                img.src = "${ctx}/images/common/" + src + "_selected.png";
                activeImg = img;
                document.getElementById("subResource").innerHTML = "";
            }
        }
    }

    document.getElementById("menuLi0").click();
    UserService.getWxConfig("https://www.dazongpai.com/am/wx/framework.jsp", function (wxConfig) {
        wx.config({
            debug: false, //调试阶段建议开启  
            appId: wxConfig["appId"],//APPID  
            timestamp: wxConfig["timestamp"],//上面main方法中拿到的时间戳timestamp  
            nonceStr: wxConfig["nonceStr"],//上面main方法中拿到的随机数nonceStr  
            signature: wxConfig["signature"],//上面main方法中拿到的签名signature  
            jsApiList: ["chooseImage", "getLocalImgData"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function(){
            console.log("wx api ready success");
        });

        wx.error(function(res){
            loading(res.errMsg);
            console.log(res.errMsg);
        });
    });

    function chooseImage() {
        wx.chooseImage({
            count: 9, // 最多可以选择的图片张数，默认9
            sizeType: ["compressed"], // original 原图，compressed 压缩图，默认二者都有
            sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                for (var i in localIds) {
                    var localId = localIds[i];
                    getLocalData(localId);
                }
            },
            fail: function (res) {
                loading(res.errMsg);
                console.info("choose image fail")
            }
        });
    }

    function getLocalData(localId) {
        wx.getLocalImgData({
            localId: localId, // 图片的localID
            success: function (res) {
                var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                document.getElementById("homeFrame").contentWindow.previewImage(localData);
            }
        });
    }

    function uploadImg(localIds) {
        if (localIds.length <= 0) {
            return false;
        }
        var localId;
        for (var i = 0; i < localIds.length; i++) {
            localId = localIds[i];
            wx.uploadImage({
                localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    var serverId = sres.serverId;
                    loading(serverId)
                }
            });
        }
    }

    function resetHomeFrameHeight(iframe) {
//        var userAgent = navigator.userAgent;
//        var subDoc = iframe.contentDocument || iframe.contentWindow.document;
//        var subBody = subDoc.body;
//        var height = this.height = document.documentElement.clientHeight;;
//        if (userAgent.indexOf("Chrome") > -1) {
//            height = subBody.documentElement.scrollHeight;
//        } else {
//            height = subBody.scrollHeight;
//        }
//        loading(height)
//        iframe.height = height;
    }
</script>

